<template>
  <a-card class="min-h-[68px] rounded my-[10px]" :body-style="{ padding: '12px 30px', height: '700px' }"
    :bordered="false">
    <!-- 正文头部 -->
    <div slot="title" style="display: flex; justify-content: space-between;">
      <a-space>
        <div class="ty"></div> {{ pageTitle }}{{ $t('user.verification-code.required111566110577275') }}
      </a-space>
      <!-- 头部返回列表功能 -->
      <a-button class="border-none" icon="rollback" @click="rollback">{{ $t('app.setting.themecolor.rr99') }}</a-button>
    </div>
    <!-- 正文头部 -->
    <div slot="title" style="margin: 30px 10px 0px 20px;">
      <div style="display: flex; justify-content: space-between;">
        <a-space>
          <div class="ty"></div>BBA 20th assciate
        </a-space>
        <!-- 查看详情 -->
        <look />
      </div>
      <div style="margin-top: 10px;">
        <a-progress v-bind:width="400" stroke-linecap="square" :percent="99" :steps="3" />
      </div>
    </div>
    <div class="card-left">
      <p class="left-title">{{ $t('user.verification-code.required111566110577276') }}</p>
      <ul style="padding-left: 30px;">
        <li>1.Scenario</li>
        <li>2.Minimization and Necessity Test</li>
        <li>3.Collectiong</li>
        <li>4.Transfer</li>
        <li>5.Using,processing,providing,disclose</li>
        <li>6.Storing & Erasing</li>
        <li>7.Data Subject Right</li>
        <li>8.OutSouring</li>
        <li>9.Sharing</li>
        <li>10.Data Megering</li>
        <li>11.Automated Decision Making</li>
        <li>12.Cross-border Data Transfer</li>
        <li>13.Mobile App</li>
      </ul>
    </div>
    <!-- 成功报告 -->
    <div style="padding: 90px;">
      <img src="../../../../img/13.png" alt="" style="padding: 20px 20px 20px 100px;">
      <p style="font-size: 20px; margin-left: 60px;">{{ $t('user.verification-code.required11156611044') }}</p>
      <!-- <p style="font-size: 14px; margin: 10px 0px;">{{ $t('user.verification-code.required11156611045') }}</p> -->
      <a-button style="margin-left: 100px;" @click="handel">
        {{ $t('app.setting.themecolor.rr99') }}
      </a-button>
    </div>
  </a-card>
</template>

<script>

export default {

  components: {
  },
  data() {
    return {
      current: '',
      value: '',
      visible: false,
    }
  },
  methods: {
    rollback() {
      this.$router.go(-1)
    },
    handel() {
      this.$router.push({ path: '/dpia/onequestion/rpaaround', })
    }

  }
}

</script>

<style lang="less" scoped>
/deep/.ant-card-body {
  display: flex;

  .buttomm {
    width: 100%;

  }

  .card-left {
    /*rectangle copy 4备份 87*/
    margin: 20px 30px 20px 20px;
    color: #000;
    left: 339px;
    top: 287px;
    width: 388px;
    height: 428px;
    opacity: 0.5;
    border-radius: 2px;
    background: rgba(213, 229, 255, 1);

    ul li {
      padding: 3px;
    }
  }

  .left-title {
    font-weight: bold;
    color: #000;
    width: 100%;
    line-height: 40px;
    padding: 0 10px;
    opacity: 0.6;
    background: rgb(32, 72, 137);
    border-bottom: 1px solid #DDD;
  }

  .card-right {
    margin: 30px 30px 30px 60px;
  }


  p {
    color: #000;
  }

}
</style>